<template>
   <div>
      <button v-for="(item,index) in getFunData" :key="index" class="flex" :style="getStyle(item.background,item.state)" @click="SelectFun(item)">
            <font-awesome-icon  :icon="item.icon" class="icon"/>
            <div class="value" >{{item.label}}</div>
      </button>
   </div>
</template>
<script>
import { mapMutations, mapState,mapActions } from 'vuex'
  export default 
  {
     name :'', 
     data() {
      return {
          ClikeState:true,
          timer:null,
          funData:[
                {label:'评论',icon:'pen-to-square',background:'skyblue',state:1,click:this.discuss_,time:0},
                {label:'点赞',icon:'heart',value:0,background:'red',state:0,click:this.LikeCollect_,type:'like',time:0},
                {label:'收藏',icon:'star',value:0,background:'orange',state:0,click:this.LikeCollect_,type:'collect',time:0},
                {label:'设置',icon:'gear',value:0,background:'#3778B4',state:1,click:this.openDetailSet,time:0,type:1},
                {label:'举报',icon:'envelope-open-text',value:0,background:'#E6A23C',state:1,click:this.openReport,time:0,type:2},
            ]
      }
     },
     computed:{
       ...mapState('ArticleDetail',['ArticleDetail']), //文章详情信息
       ...mapState('Login',['User']),
       getFunData(){
           let uid = this.User?.uid || 0
           let createduid = this.ArticleDetail?.createdUid || 0
           let type = uid == createduid ? 2 : 1 //1:作者 2:其他人
          return  this.funData.filter(item => item.type != type)
        },
     },
     methods:{ 
       ...mapMutations('ArticleDetail',['SETARTICLEDETAILSETSTATE']),//打开文章设置
        ...mapMutations('Discuss',['DISCUSSON']),  //打开评论框
        ...mapMutations('Report',['SETREPORT']), //举报框
        
        ...mapActions('Article',['LikeCollect','deleteArticle']), //点赞收藏 删除
        TimeKeeping(item){ //计时
           clearTimeout(this.timer)
           this.timer = setTimeout(() => {
               item.time = 0
               clearTimeout(this.timer)
             }, 5000);
        },
        SelectFun(item){
             if(item.click == null) return this.$message.warning('功能暂未实现')
             if(item.time >= 3) {
                this.TimeKeeping(item)
                this.$message.warning('请勿频繁操作')
                return 
             }
             if(this.User == null) return this.$public.toLogin()
             item.time += 1
             this.TimeKeeping(item)
             item.click(item)
        },
        getStyle(background,state){
            if(state == 0)
                return{background:'gray'}
            
             return {background}
        },
        //打开设置框
        openDetailSet(){
           this.SETARTICLEDETAILSETSTATE(true)
        },
        //打开举报框
        openReport(){
           let createdUid  =  this.User?.uid //创建UID
           let updateUid =createdUid //修改人UID
           let articleId = this.ArticleDetail?.id //文章ID
           let reportUid = this.ArticleDetail?.createdUid //文章作者UID
           let report = {type:1,createdUid,updateUid,articleId,reportUid} //文章举报
           this.SETREPORT({state:true,title:`举报文章 ${this.ArticleDetail.title}`,report})
        },
      
        discuss_(){
           let data = {id:this.ArticleDetail.id}
           data.type=1 // 1:评论文章
           data.discussTitle='评论文章 ' +  this.ArticleDetail.title
           this.DISCUSSON(data)
        },
        async  LikeCollect_(item){
  

            let type = item.type
            let uid = this.User?.uid || 0
            let id = this.ArticleDetail?.id || 0
            let res = await this.LikeCollect({id,uid,type})
            if(res.code == 200){
                 this.$message.success(res.message)
                 item.state = res.data.state
                 let key = item.type == 'like' ? 'likecount' : 'collectcount'
                 this.ArticleDetail.extra[key] = res.data.count
            }
            else if(res.code == -1){
               return this.$public.toLogin()
            }
            else this.$message.error(res.message)
        },     
       
     },
     created(){
        this.funData[1].state = this.ArticleDetail?.extra?.likestate
        this.funData[2].state = this.ArticleDetail?.extra?.collectstate
     },
     watch:{
        $route(){
           this.funData[1].state = this.ArticleDetail?.extra?.likestate
           this.funData[2].state = this.ArticleDetail?.extra?.collectstate
        }
     },
     beforeDestroy(){
        clearTimeout(this.timer)
     },
   

  }
</script>
<style scoped lang='less'>
button{
    background: var(--GeneralBackColor);
    border-radius: 50%;
    margin:  10px;
    width: 50px;
    height:50px;

    .icon{
        font-size: 25px;
        color: white;
    }
    .value{
        margin-left: 5px;
        display: none;
        font-size: 25px;
        color: white;
        font-weight: 600;
    }
}


</style>